<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供应链管理系统 - 动态交互平台</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <div class="header">
        <div class="header-top">
            <div class="header-content">
                <div>
                    <div class="logo">
                        <i class="fas fa-network-wired"></i>
                        供应链管理系统
                    </div>
                    <div class="subtitle">动态交互功能平台</div>
                </div>
                <div class="header-actions">
                    <button class="btn-refresh" onclick="refreshData()">
                        <i class="fas fa-sync-alt"></i> 刷新数据
                    </button>
                    <div class="connection-status" id="connectionStatus">
                        <i class="fas fa-circle"></i> 连接正常
                    </div>
                </div>
            </div>
        </div>
        <div class="top-nav">
            <div class="nav-container">
                <ul class="nav-menu">
                    <li class="nav-item">
                        <a href="#dashboard" class="nav-link active" data-module="dashboard">
                            <i class="fas fa-tachometer-alt"></i> 仪表板
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#inventory" class="nav-link" data-module="inventory">
                            <i class="fas fa-boxes"></i> 库存管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#orders" class="nav-link" data-module="orders">
                            <i class="fas fa-shopping-cart"></i> 订单管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#analytics" class="nav-link" data-module="analytics">
                            <i class="fas fa-chart-bar"></i> 智能分析
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#quality" class="nav-link" data-module="quality">
                            <i class="fas fa-award"></i> 质量管理
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="main-container">
        <!-- 加载指示器 -->
        <div class="loading-overlay" id="loadingOverlay">
            <div class="loading-spinner">
                <i class="fas fa-spinner fa-spin"></i>
                <span>加载中...</span>
            </div>
        </div>

        <!-- 仪表板模块 -->
        <div id="dashboard-content" class="module-content active">
            <div class="module-header">
                <h1><i class="fas fa-tachometer-alt"></i> 系统仪表板</h1>
                <p>实时监控供应链关键指标和业务状态</p>
            </div>
            
            <!-- KPI指标卡片 -->
            <div class="kpi-grid" id="kpiGrid">
                <!-- 动态加载KPI数据 -->
            </div>

            <!-- 图表区域 -->
            <div class="charts-grid">
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>库存状态分布</h3>
                        <div class="chart-controls">
                            <select id="inventoryPeriod">
                                <option value="7">最近7天</option>
                                <option value="30" selected>最近30天</option>
                                <option value="90">最近90天</option>
                            </select>
                        </div>
                    </div>
                    <canvas id="inventoryChart"></canvas>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>订单趋势分析</h3>
                        <div class="chart-controls">
                            <select id="orderPeriod">
                                <option value="7">最近7天</option>
                                <option value="30" selected>最近30天</option>
                                <option value="90">最近90天</option>
                            </select>
                        </div>
                    </div>
                    <canvas id="orderChart"></canvas>
                </div>
            </div>

            <!-- 实时数据表格 -->
            <div class="data-table-container">
                <div class="table-header">
                    <h3>最新业务动态</h3>
                    <div class="table-controls">
                        <input type="text" id="searchInput" placeholder="搜索..." class="search-input">
                        <button class="btn-export" onclick="exportData()">
                            <i class="fas fa-download"></i> 导出
                        </button>
                    </div>
                </div>
                <div class="table-wrapper">
                    <table class="data-table" id="businessTable">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>业务类型</th>
                                <th>描述</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="businessTableBody">
                            <!-- 动态加载数据 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 库存管理模块 -->
        <div id="inventory-content" class="module-content">
            <div class="module-header">
                <h1><i class="fas fa-boxes"></i> 库存管理</h1>
                <p>实时库存监控、预警和优化管理</p>
            </div>
            
            <div class="inventory-controls">
                <div class="filter-group">
                    <label>仓库筛选:</label>
                    <select id="warehouseFilter">
                        <option value="all">全部仓库</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>产品类别:</label>
                    <select id="categoryFilter">
                        <option value="all">全部类别</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>库存状态:</label>
                    <select id="statusFilter">
                        <option value="all">全部状态</option>
                        <option value="normal">正常</option>
                        <option value="low">低库存</option>
                        <option value="out">缺货</option>
                    </select>
                </div>
            </div>

            <div class="inventory-grid" id="inventoryGrid">
                <!-- 动态加载库存数据 -->
            </div>
        </div>

        <!-- 订单管理模块 -->
        <div id="orders-content" class="module-content">
            <div class="module-header">
                <h1><i class="fas fa-shopping-cart"></i> 订单管理</h1>
                <p>订单处理、跟踪和分析管理</p>
            </div>
            
            <div class="orders-summary" id="ordersSummary">
                <!-- 动态加载订单汇总 -->
            </div>

            <div class="orders-table-container">
                <div class="table-header">
                    <h3>订单列表</h3>
                    <div class="table-controls">
                        <select id="orderStatusFilter">
                            <option value="all">全部状态</option>
                            <option value="pending">待处理</option>
                            <option value="processing">处理中</option>
                            <option value="completed">已完成</option>
                            <option value="cancelled">已取消</option>
                        </select>
                        <input type="text" id="orderSearchInput" placeholder="搜索订单..." class="search-input">
                    </div>
                </div>
                <div class="table-wrapper">
                    <table class="data-table" id="ordersTable">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>客户</th>
                                <th>金额</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="ordersTableBody">
                            <!-- 动态加载订单数据 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 智能分析模块 -->
        <div id="analytics-content" class="module-content">
            <div class="module-header">
                <h1><i class="fas fa-chart-bar"></i> 智能分析</h1>
                <p>AI驱动的供应链智能分析和预测</p>
            </div>
            
            <div class="analytics-tabs">
                <button class="tab-btn active" data-tab="forecast">需求预测</button>
                <button class="tab-btn" data-tab="optimization">库存优化</button>
                <button class="tab-btn" data-tab="supplier">供应商分析</button>
                <button class="tab-btn" data-tab="trends">市场趋势</button>
            </div>

            <div class="analytics-content-area">
                <div id="forecast-tab" class="tab-content active">
                    <div class="forecast-controls">
                        <select id="forecastProduct">
                            <option value="all">全部产品</option>
                        </select>
                        <select id="forecastPeriod">
                            <option value="30">未来30天</option>
                            <option value="60">未来60天</option>
                            <option value="90">未来90天</option>
                        </select>
                        <button class="btn-primary" onclick="generateForecast()">生成预测</button>
                    </div>
                    <div class="forecast-results" id="forecastResults">
                        <!-- 动态加载预测结果 -->
                    </div>
                </div>

                <div id="optimization-tab" class="tab-content">
                    <div class="optimization-results" id="optimizationResults">
                        <!-- 动态加载优化建议 -->
                    </div>
                </div>

                <div id="supplier-tab" class="tab-content">
                    <div class="supplier-analysis" id="supplierAnalysis">
                        <!-- 动态加载供应商分析 -->
                    </div>
                </div>

                <div id="trends-tab" class="tab-content">
                    <div class="trends-analysis" id="trendsAnalysis">
                        <!-- 动态加载趋势分析 -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 质量管理模块 -->
        <div id="quality-content" class="module-content">
            <div class="module-header">
                <h1><i class="fas fa-award"></i> 质量管理</h1>
                <p>质量检验、标准管理和CAPA流程</p>
            </div>
            
            <div class="quality-dashboard" id="qualityDashboard">
                <!-- 动态加载质量数据 -->
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal" id="detailModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">详细信息</h3>
                <button class="modal-close" onclick="closeModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- 动态内容 -->
            </div>
        </div>
    </div>

    <script src="js/api-client.js"></script>
    <script src="js/charts.js"></script>
    <script src="js/app.js"></script>
</body>
</html>